<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import CollegeDec from '@/pages/college/collegeDetail/college-dec.vue'
import CollegePostgraduate from '@/pages/college/collegeDetail/college-postgraduate.vue'
import CollegeEmploy from '@/pages/college/collegeDetail/college-employ.vue'
import CollegeRecruit from '@/pages/college/collegeDetail/college-recruit.vue'

const { initPageId } = defineProps({
  initPageId: {
    type: Number,
    default: 0,
  },
})

const collegeList = ref<[]>([])

const guipage = ref<any>(null)
// 页面加载
const pageLoading = ref<boolean>(false)
onLoad(() => {
  collegeList.value = []

  setTimeout(() => {
    // 对演示数据随机刷新模拟数据刷新
    // guipage.value.stoploadmore()
  }, 200)
})

onMounted(() => {
  pageId.value = initPageId
})

interface Tag {
  name: string
  id: number | string
}

const tagList = ref<Tag[]>([
  {
    id: 0,
    name: '重庆 重庆市',
  },
  {
    id: 1,
    name: '公办 普通本科',
  },
])

const pageId = ref<number>(0)
const toCollegeList = () => {
  uni.navigateTo({
    url: '/pages/SubjectSelectionAssistant/byCourse/collegeList',
  })
}
</script>

<template>
  <gui-page
    ref="guipage"
    :api-loading-status="apiLoadingStatus"
    :custom-header="true"
    :full-page="true"
    :is-loading="pageLoading"
    :loadmore="false"
    :refresh="false"
    style="background-color: white"
    @loadmorefun="getNews"
    @reload="reload"
  >
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 使用组件实现返回按钮及返回首页按钮 -->
        <gui-header-leading :back="true" :home="false" />
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text class="gui-h5 gui-blod gui-flex1 gui-text-center gui-ellipsis gui-primary-text">根据选科查大学</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view style="width: 120rpx" />
        <!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
      </view>
    </template>

    <template #gBody>
      <view class="gui-flex1 gui-flex gui-column wh100p" style="background-color: white; padding: 0 20rpx; box-sizing: border-box">
        <!--        <view class="flex flex-column" style="padding: 70rpx 20rpx">-->
        <!--          <view class="flex gap12" style="">-->
        <!--            <view class="flex-center" style="">-->
        <!--              <img src="#" style="border-radius: 50%; border: #9e9e9e solid 1rpx; width: 70rpx; height: 70rpx" />-->
        <!--            </view>-->
        <!--            <view class="flex-column">-->
        <!--              <view class="flex gap18" style="">-->
        <!--                <view class="flex column-center gap18" style="height: 30rpx">-->
        <!--                  <text class="collegeDetail-title" style="color: #537bb6; font-size: 38rpx">重庆医科大学</text>-->
        <!--                  <text class="gui-icons gui-block gui-color-gray gui-text">&#xe645;</text>-->
        <!--                </view>-->
        <!--              </view>-->
        <!--            </view>-->
        <!--          </view>-->
        <!--        </view>-->
        <view class="w100p bgfff flex-column mt20" style="padding: 25rpx; box-sizing: border-box">
          <text>首选科目</text>
          <view class="flex" style="padding: 0 10rpx; box-sizing: border-box">
            <gui-stags
              :checked-class="['gui-bg-primary', 'gui-dark-bg', 'gui-color-white', 'text-center']"
              class="mt10"
              :default-class="['text-center', 'bgf5f5f5', 'border-radius-15', 'gui-primary-text', 'gui-dark-text-level-5']"
              :line-height="3"
              :padding="20"
              :size="24"
              :tags="[
                { text: '物理', id: '0' },
                { text: '历史', id: '1' },
              ]"
              :width="100"
            />
          </view>
          <text class="mt10">次选科目</text>
          <view class="flex" style="padding: 0 10rpx; box-sizing: border-box">
            <gui-stags
              :checked-class="['gui-bg-primary', 'gui-dark-bg', 'gui-color-white', 'text-center']"
              class="mt10"
              :default-class="['text-center', 'gui-bg-gray', 'gui-dark-bg-level-1', 'gui-primary-text', 'gui-dark-text-level-5']"
              :line-height="3"
              :padding="20"
              :size="24"
              :tags="[
                { text: '物理', id: '0' },
                { text: '历史', id: '1' },
              ]"
              :width="100"
            />
          </view>
          <view class="w100p mt40">
            <button class="gui-button gui-bg-blue" :plain="false" style="border-radius: 20rpx" type="default" @click="toCollegeList">
              <text class="colorfff gui-button-text" style="line-height: 60rpx">查询</text>
            </button>
          </view>
        </view>
        <!--        <view class="flex-column gui-flex1" style="padding: 10rpx; box-sizing: border-box; font-size: 28rpx">-->
        <!--          <text>{{ `共筛选出${29}个专业` }}</text>-->
        <!--          <view class="gui-flex1 relative">-->
        <!--            <scroll-view class="gui-absolute-full gui-flex1" scroll-y style="padding: 10rpx 0">-->
        <!--              <view-->
        <!--                v-for="(item, index) in 12"-->
        <!--                class="flex-column gap8 mb10"-->
        <!--                style="background-color: white; padding: 20rpx; border-radius: 20rpx"-->
        <!--              >-->
        <!--                <text style="font-size: 36rpx">{{ `临床医学` }}</text>-->
        <!--                <text style="font-size: 24rpx; color: #aaaaaa">{{ `专业类别：本科-医学-临床医学类` }}</text>-->
        <!--                <text style="font-size: 24rpx; color: #aaaaaa">{{ `专业年限：五年` }}</text>-->
        <!--              </view>-->
        <!--            </scroll-view>-->
        <!--          </view>-->
        <!--        </view>-->
      </view>
    </template>
  </gui-page>
</template>

<style scoped>
.college-img {
  width: 100%;
  height: 300rpx;
  background-color: aqua;
}

.college-logo-box {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
}

.college-logo-box image {
  width: 120rpx;
  height: 120rpx;
  background-color: aliceblue;
  border-radius: 50%;
}
</style>
